<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
    "
    @click="$emit('click')"
  >
    <div
      style="
        width: 70px;
        height: 70px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      "
      :style="{ background: color }"
    >
      <div
        style="
          font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
          font-weight: bold;
          font-size: 28px;
          color: #ffffff;
          line-height: 26px;
          text-align: left;
          font-style: normal;
        "
      >
        {{ title.substring(0, 1) }}
      </div>
    </div>
    <div style="font-size: 14px; margin-top: 5px">
      {{ title.substring(0, 4) }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'fontButton',
  props: ['title', 'color', 'num'],
  data() {
    return {}
  },
}
</script>

<style>
</style>